<template>
  <egrid class="egrid"
         stripe
         :column-type="isSelection"
         :data="tabData"
         :columns="columns"
         :columns-props="columnsProps"
         :columns-schema="columnsSchema"
         @selection-change="selectionChange">
  </egrid>
</template>
<script>
import Vue from 'vue'
var Editor = {
  template:
    `<span v-if="row[col.prop] !== null">{{ row[col.prop] }}</span>`,
  props: ['row', 'col'],
  computed: {
    text () {
      return this.row[this.col.prop]
    }
  }
}
export default {
  name: 'TabList',
  props: {
    tabData: Array,
    columnType: {
      type: String,
      default: ''
    },
    columns: Array,
    specCol: {
      type: Array,
      default: () => [{ label: '', prop: '', tem: '' }],
      required: false
    },
    selectionChange: {
      type: Function,
      default: () => { console.log('selectionChange') },
      required: false
    },
    isSelection: {
      type: String,
      default: ''
    }
  },
  computed: {
    columnsSchema () {
      let res = {}
      this.specCol.forEach(item => {
        if (item.label && item.prop && item.tem) {
          res[item.label] = {
            width: item.prop === 'func' ? '150px' : 'auto',
            // propsHandler 可用于转换传给自定义组件的 props
            propsHandler: ({ col, row, colProp = item.prop }) => {
              return { [colProp]: row[col.prop], row: row, that: this }
            },
            // 这里的 props 是 address
            component: Vue.extend({
              props: [item.prop, 'row', 'that'],
              template: item.tem
            })
          }
        }
      })
      console.log(res)
      return res
    }
  },
  data () {
    return {
      columnsProps: {
        'show-overflow-tooltip': true,
        component: Editor
      }
    }
  }
}
</script>
